<template>
  <div class="copyright-market">
    <ServiceNav />

    <!-- 顶部搜索区域 -->
    <div class="search-banner">
      <div class="container">
        <h1 class="search-title">版权素材市场</h1>
        <p class="search-subtitle">海量正版素材，一站式授权</p>

        <div class="search-box">
          <el-input 
            v-model="searchQuery" 
            placeholder="搜索素材、作品、创作者..." 
            class="search-input"
            clearable>
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>

        <div class="hot-keywords">
          <span class="hot-label">热门：</span>
          <el-tag 
            v-for="tag in hotKeywords" 
            :key="tag"
            effect="plain"
            class="hot-tag"
            @click="searchByTag(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 素材分类导航 -->
    <div class="category-nav">
      <div class="container">
        <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
          <el-tab-pane 
            v-for="category in categories" 
            :key="category.value" 
            :label="category.label" 
            :name="category.value">
          </el-tab-pane>
        </el-tabs>

        <div class="filter-options">
          <div class="filter-item">
            <span class="filter-label">格式：</span>
            <el-radio-group v-model="filters.format" size="small" @change="applyFilters">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="jpg">JPG</el-radio-button>
              <el-radio-button label="png">PNG</el-radio-button>
              <el-radio-button label="svg">SVG</el-radio-button>
              <el-radio-button label="mp4">MP4</el-radio-button>
            </el-radio-group>
          </div>

          <div class="filter-item">
            <span class="filter-label">授权：</span>
            <el-radio-group v-model="filters.license" size="small" @change="applyFilters">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="free">免费</el-radio-button>
              <el-radio-button label="premium">付费</el-radio-button>
            </el-radio-group>
          </div>

          <div class="filter-item">
            <span class="filter-label">排序：</span>
            <el-select v-model="sortBy" size="small" @change="applySorting">
              <el-option label="最新上传" value="latest"></el-option>
              <el-option label="最多下载" value="downloads"></el-option>
              <el-option label="最多收藏" value="favorites"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 素材列表 -->
    <div class="materials-section">
      <div class="container">
        <div class="materials-grid">
          <div v-for="item in materialsList" :key="item.id" class="material-card">
            <div class="material-image">
              <img :src="item.thumbnail" :alt="item.title">
              <div class="hover-overlay">
                <div class="material-buttons">
                  <el-button type="primary" icon="Plus" circle @click="previewMaterial(item)"></el-button>
                  <el-button icon="Star" circle @click="toggleFavorite(item)"></el-button>
                  <el-button icon="Download" circle @click="downloadMaterial(item)"></el-button>
                </div>
              </div>
              <span v-if="item.isPremium" class="premium-badge">付费</span>
            </div>
            <div class="material-info">
              <h3 class="material-title">{{ item.title }}</h3>
              <div class="material-author">
                <img :src="item.author.avatar" :alt="item.author.name" class="author-avatar">
                <span>{{ item.author.name }}</span>
              </div>
              <div class="material-meta">
                <span><el-icon><View /></el-icon> {{ item.views }}</span>
                <span><el-icon><Download /></el-icon> {{ item.downloads }}</span>
                <span class="material-price" v-if="item.isPremium">{{ item.price }}元</span>
                <span class="material-free" v-else>免费</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalItems"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 推荐创作者 -->
    <div class="featured-authors">
      <div class="container">
        <h2 class="section-title">推荐创作者</h2>
        <div class="authors-grid">
          <div v-for="author in featuredAuthors" :key="author.id" class="author-card">
            <img :src="author.avatar" :alt="author.name" class="author-avatar-large">
            <h3 class="author-name">{{ author.name }}</h3>
            <p class="author-bio">{{ author.bio }}</p>
            <div class="author-stats">
              <span><el-icon><Picture /></el-icon> {{ author.works }}作品</span>
              <span><el-icon><Star /></el-icon> {{ author.followers }}粉丝</span>
            </div>
            <el-button type="primary" plain>关注</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 素材预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      title="素材预览"
      width="70%"
      :before-close="closePreview">
      <div class="preview-content" v-if="selectedMaterial">
        <div class="preview-image">
          <img :src="selectedMaterial.previewUrl || selectedMaterial.thumbnail" :alt="selectedMaterial.title">
        </div>
        <div class="preview-info">
          <h2>{{ selectedMaterial.title }}</h2>
          <div class="preview-meta">
            <div class="meta-item">
              <span class="meta-label">创作者：</span>
              <span>{{ selectedMaterial.author.name }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">格式：</span>
              <span>{{ selectedMaterial.format }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">尺寸：</span>
              <span>{{ selectedMaterial.dimensions }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">上传时间：</span>
              <span>{{ selectedMaterial.uploadDate }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">标签：</span>
              <div class="tags-list">
                <el-tag v-for="tag in selectedMaterial.tags" :key="tag" size="small">{{ tag }}</el-tag>
              </div>
            </div>
          </div>
          <div class="download-section">
            <div class="price-info" v-if="selectedMaterial.isPremium">
              <span class="price">{{ selectedMaterial.price }}元</span>
              <el-button type="warning">购买授权</el-button>
            </div>
            <div class="price-info" v-else>
              <span class="free-label">免费下载</span>
            </div>
            <el-button type="primary" icon="Download">立即下载</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <Footer />
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { Search, View, Download, Star, Picture, Plus } from '@element-plus/icons-vue';
import ServiceNav from '@/components/ServiceNav.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'CopyrightMarket',
  components: {
    ServiceNav,
    Footer,
    Search,
    View,
    Download,
    Star,
    Picture,
    Plus
  },
  setup() {
    // 搜索相关
    const searchQuery = ref('');
    const hotKeywords = ref(['插画', '节日', '背景', '海报', '动物', '商务']);
    
    // 分类和筛选
    const activeCategory = ref('all');
    const filters = reactive({
      format: 'all',
      license: 'all'
    });
    const sortBy = ref('latest');
    
    // 分页
    const currentPage = ref(1);
    const pageSize = ref(12);
    const totalItems = ref(100);
    
    // 素材预览
    const previewDialogVisible = ref(false);
    const selectedMaterial = ref(null);
    
    // 分类列表
    const categories = ref([
      { value: 'all', label: '全部' },
      { value: 'photo', label: '摄影' },
      { value: 'illustration', label: '插画' },
      { value: 'vector', label: '矢量图' },
      { value: 'video', label: '视频' },
      { value: 'audio', label: '音频' },
      { value: 'template', label: '模板' }
    ]);
    
    // 素材列表
    const materialsList = ref([
      {
        id: 1,
        title: '创意商务插画',
        thumbnail: '/images/materials/1.jpg',
        previewUrl: '/images/materials/1_preview.jpg',
        author: { id: 1, name: '创意工作室', avatar: '/images/avatars/1.jpg' },
        views: 1234,
        downloads: 456,
        isPremium: true,
        price: 20,
        format: 'PSD',
        dimensions: '3000x2000px',
        uploadDate: '2023-07-21',
        tags: ['商务', '插画', '创意', '办公']
      },
      {
        id: 2,
        title: '夏季自然风景',
        thumbnail: '/images/materials/2.jpg',
        previewUrl: '/images/materials/2_preview.jpg',
        author: { id: 2, name: '风景摄影师', avatar: '/images/avatars/2.jpg' },
        views: 2345,
        downloads: 789,
        isPremium: false,
        format: 'JPG',
        dimensions: '4000x3000px',
        uploadDate: '2023-07-15',
        tags: ['自然', '风景', '夏季', '摄影']
      },
      // ... 添加更多素材
    ]);
    
    // 推荐创作者
    const featuredAuthors = ref([
      {
        id: 1,
        name: '创意工作室',
        avatar: '/images/avatars/1.jpg',
        bio: '专注创意商业插画设计，为企业提供高质量视觉解决方案',
        works: 156,
        followers: 1245
      },
      {
        id: 2,
        name: '风景摄影师',
        avatar: '/images/avatars/2.jpg',
        bio: '自然风光摄影师，捕捉大自然的壮丽景色',
        works: 89,
        followers: 567
      },
      {
        id: 3,
        name: '动画设计师',
        avatar: '/images/avatars/3.jpg',
        bio: '专业动画设计，擅长角色设计和场景构建',
        works: 78,
        followers: 890
      },
      {
        id: 4,
        name: '剪辑达人',
        avatar: '/images/avatars/4.jpg',
        bio: '提供高质量视频素材和专业剪辑服务',
        works: 64,
        followers: 345
      }
    ]);
    
    // 处理搜索
    const handleSearch = () => {
      console.log('搜索:', searchQuery.value);
      // 实际应用中会调用API进行搜索
    };
    
    const searchByTag = (tag) => {
      searchQuery.value = tag;
      handleSearch();
    };
    
    // 处理分类和筛选
    const handleCategoryChange = (tab) => {
      console.log('分类切换:', tab.props.name);
      // 实际应用中会根据分类筛选内容
    };
    
    const applyFilters = () => {
      console.log('应用筛选:', filters);
      // 实际应用中会根据筛选条件请求数据
    };
    
    const applySorting = () => {
      console.log('排序方式:', sortBy.value);
      // 实际应用中会根据排序方式请求数据
    };
    
    // 处理分页
    const handlePageChange = (page) => {
      currentPage.value = page;
      console.log('页码切换:', page);
      // 实际应用中会请求对应页码的数据
    };
    
    // 素材操作
    const previewMaterial = (material) => {
      selectedMaterial.value = material;
      previewDialogVisible.value = true;
    };
    
    const closePreview = () => {
      previewDialogVisible.value = false;
    };
    
    const toggleFavorite = (material) => {
      console.log('收藏素材:', material.id);
      // 实际应用中会调用API收藏素材
    };
    
    const downloadMaterial = (material) => {
      if (material.isPremium) {
        // 显示购买对话框
        console.log('需要购买素材:', material.id);
      } else {
        // 直接下载
        console.log('下载免费素材:', material.id);
        // window.open(material.downloadUrl);
      }
    };
    
    // 模拟数据加载
    onMounted(() => {
      // 在实际应用中,这里会从API获取数据
      console.log('版权市场组件已加载');
    });
    
    return {
      // 搜索相关
      searchQuery,
      hotKeywords,
      handleSearch,
      searchByTag,
      
      // 分类和筛选
      categories,
      activeCategory,
      filters,
      sortBy,
      handleCategoryChange,
      applyFilters,
      applySorting,
      
      // 分页
      currentPage,
      pageSize,
      totalItems,
      handlePageChange,
      
      // 素材列表
      materialsList,
      previewMaterial,
      toggleFavorite,
      downloadMaterial,
      
      // 素材预览
      previewDialogVisible,
      selectedMaterial,
      closePreview,
      
      // 推荐创作者
      featuredAuthors
    };
  }
});
</script>

<style lang="scss" scoped>
.copyright-market {
  min-height: 100vh;
}

.search-banner {
  padding: $spacing-extra-large 0;
  background: linear-gradient(to right, #3494e6, #ec6ead);
  color: $background-color-white;
  margin-top: 0px;
  text-align: center;
  
  .search-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: $spacing-small;
  }
  
  .search-subtitle {
    font-size: $font-size-large;
    margin-bottom: $spacing-extra-large;
    opacity: 0.9;
  }
  
  .search-box {
    max-width: 600px;
    margin: 0 auto $spacing-large;
    display: flex;
    
    .search-input {
      flex-grow: 1;
      margin-right: $spacing-small;
      
      :deep(.el-input__inner) {
        height: 50px;
        font-size: $font-size-medium;
      }
    }
    
    .el-button {
      height: 50px;
      font-size: $font-size-medium;
    }
  }
  
  .hot-keywords {
    .hot-label {
      color: rgba(255, 255, 255, 0.8);
      margin-right: $spacing-small;
    }
    
    .hot-tag {
      margin: 0 $spacing-mini;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      color: $background-color-white;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
}

.container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

.category-nav {
  background-color: $background-color-white;
  box-shadow: $box-shadow-light;
  margin-bottom: $spacing-base;
  
  .el-tabs {
    margin-bottom: $spacing-base;
  }
  
  .filter-options {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: $spacing-base;
    border-bottom: 1px solid $border-color-light;
    
    .filter-item {
      margin-right: $spacing-large;
      margin-bottom: $spacing-small;
      display: flex;
      align-items: center;
      
      .filter-label {
        margin-right: $spacing-small;
        color: $text-secondary;
      }
    }
  }
}

.materials-section {
  padding: $spacing-large 0 $spacing-extra-large;
  
  .materials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 1200px) {
      grid-template-columns: repeat(3, 1fr);
    }
    
    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }
}

.material-card {
  border-radius: $border-radius-base;
  overflow: hidden;
  box-shadow: $box-shadow-light;
  transition: $transition-base;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: $box-shadow-base;
    
    .hover-overlay {
      opacity: 1;
    }
  }
  
  .material-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    
    .hover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .material-buttons {
      display: flex;
      gap: $spacing-small;
    }
    
    .premium-badge {
      position: absolute;
      top: $spacing-small;
      right: $spacing-small;
      background-color: $warning-color;
      color: $background-color-white;
      padding: 2px 6px;
      border-radius: $border-radius-small;
      font-size: $font-size-small;
    }
  }
  
  .material-info {
    padding: $spacing-base;
    background-color: $background-color-white;
  }
  
  .material-title {
    font-size: $font-size-medium;
    color: $text-primary;
    margin-bottom: $spacing-small;
    @include text-truncate(1);
  }
  
  .material-author {
    display: flex;
    align-items: center;
    margin-bottom: $spacing-small;
    
    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: $spacing-small;
      object-fit: cover;
    }
    
    span {
      color: $text-secondary;
      font-size: $font-size-small;
    }
  }
  
  .material-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: $font-size-small;
    color: $text-secondary;
    
    .material-price {
      color: $danger-color;
      font-weight: bold;
    }
    
    .material-free {
      color: $success-color;
    }
    
    span {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
}

.pagination-container {
  margin-top: $spacing-extra-large;
  display: flex;
  justify-content: center;
}

.featured-authors {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .section-title {
    text-align: center;
    margin-bottom: $spacing-extra-large;
    font-size: $font-size-extra-large;
    color: $text-primary;
  }
  
  .authors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }
    
    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }
  
  .author-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    text-align: center;
    box-shadow: $box-shadow-light;
    transition: $transition-base;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .author-avatar-large {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: $spacing-base;
    }
    
    .author-name {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    .author-bio {
      font-size: $font-size-small;
      color: $text-regular;
      margin-bottom: $spacing-base;
      line-height: 1.5;
      @include text-truncate(2);
    }
    
    .author-stats {
      display: flex;
      justify-content: center;
      gap: $spacing-base;
      margin-bottom: $spacing-base;
      font-size: $font-size-small;
      color: $text-secondary;
      
      span {
        display: flex;
        align-items: center;
        
        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }
}

.preview-content {
  display: flex;
  gap: $spacing-large;
  
  @media (max-width: 768px) {
    flex-direction: column;
  }
  
  .preview-image {
    flex: 3;
    
    img {
      width: 100%;
      border-radius: $border-radius-base;
      object-fit: contain;
    }
  }
  
  .preview-info {
    flex: 2;
    
    h2 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-base;
    }
    
    .preview-meta {
      margin-bottom: $spacing-large;
      
      .meta-item {
        margin-bottom: $spacing-small;
        display: flex;
        
        .meta-label {
          width: 80px;
          color: $text-secondary;
        }
        
        .tags-list {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-small;
        }
      }
    }
    
    .download-section {
      .price-info {
        margin-bottom: $spacing-small;
        
        .price {
          font-size: 24px;
          color: $danger-color;
          font-weight: bold;
          margin-right: $spacing-base;
        }
        
        .free-label {
          font-size: 24px;
          color: $success-color;
          font-weight: bold;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .search-banner {
    padding: $spacing-large 0;
    
    .search-title {
      font-size: 28px;
    }
    
    .search-subtitle {
      font-size: $font-size-medium;
    }
    
    .search-box {
      flex-direction: column;
      
      .search-input {
        margin-right: 0;
        margin-bottom: $spacing-small;
      }
    }
  }
  
  .category-nav {
    .filter-options {
      flex-direction: column;
      
      .filter-item {
        margin-right: 0;
        margin-bottom: $spacing-base;
      }
    }
  }
}
</style>
